<template>
  <div class="ts-bank-card">
    <ts-header title="编辑银行卡" back></ts-header>
    <ts-group>
      <ts-filed label="姓名" v-model="formData.name"></ts-filed>
      <ts-filed label="开户行" v-model="formData.bank" tips="请选择" readonly @click="visible=true"></ts-filed>
      <ts-filed label="银行账号" v-model="formData.card"></ts-filed>
    </ts-group>
    <div class="tf-save" ref="save">
      <ts-button @click="savaBank" size="large" :disabled="!isCheck" type="primary">保存</ts-button>
    </div>
    <bank-picker v-model="visible" @complete="complete"></bank-picker>
  </div>
</template>

<script>
  import BankPicker from '../../../components/module/BankPicker.vue'
  import {adPosition} from '../../../core/mixins'
  import verify from '../../../utils/verify'
  import axios from 'axios'
  import {ADD_BANK} from '../../../assets/js/api'

  export default {
    name: 'bankCard',
    components: {
      BankPicker
    },
    mixins: [adPosition],
    data() {
      return {
        visible: false,
        formData: {
          bank: '',
          card: '',
          name: ''
        },
        tempData: {}
      }
    },
    created() {
      let {bank, card, name} = this.$route.query;
      if (bank && card && name) {
//        this.formData.bank = bank;
//        this.formData.card = card;
//        this.formData.name = name;
//        this.tempData = this.formData;
      }
    },
    methods: {
      complete(bankName) {
        this.formData.bank = bankName;
      },
      async savaBank() {
        if (this.checkModify()) {
          let url = window.$prod ? 'https://ccdcapi.alipay.com/' : '/alipay/';

          const json = await axios.get(url + 'validateAndCacheCardInfo.json',
            {
              params: {
                _input_charset: 'utf-8',
                cardNo: this.formData.card,
                cardBinCheck: true
              },
            });

          if (json.data.validated) {
            let json = await this.$http.post(ADD_BANK, this.formData, {show: true});
            if (json.result === 1) {
              let toast = this.$toast('添加成功');
              setTimeout(() => {
                toast.close();
                this.$router.push({name: 'meansManager'})
              }, 200)
            }
          } else {
            this.$toast({message: '银行卡号格式不正确'});
          }
        } else {
          this.$toast({message: '银行卡与当前银行不一致'});
        }
      },
      checkModify() {
        let i = 0;
        for (let item of Object.keys(this.formData)) {
          if (this.formData[item] === this.tempData[item]) {
            i++;
          }
        }
        return i !== 3;
      }
    },
    computed: {
      isCheck() {
        return verify.requiredObjProp(this.formData).isValid
      }
    }
  }
</script>

<style lang="scss" scoped>
  @import "../../../assets/css/mixin";

  .ts-bank-card {
    .tf-save {
      padding: 0 .36rem;
      position: absolute;
      left: 0;
      right: 0;
      bottom: 1.12rem;
    }
  }

  .noneAnimate {
    transition: none;
  }
</style>
